<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}

		.shop-box{width: 100%;background: #FFFFFF;padding:20px 15px;box-sizing: border-box;margin-bottom: 10px;}
		.shop-box .img-box{width: 65px;height: 65px;position: relative;top: 0;left: 0;}
		.shop-box .img-box .num{width: 100%;height: 18px;background: rgba(0,0,0,0.6);text-align: center;line-height: 18px;color: #FFFFFF;font-size: 10px;bottom: 0;left: 0;position: absolute;}
		.shop-box .r{padding-left:20px;box-sizing: border-box;}
		.shop-box .r .name{font-size: 14px;color: #333333;padding: 14px 0 4px 0;box-sizing: border-box;}
		.shop-box .r .number{font-size: 13px;color: #666666;}
		.shop-box .r .number .fuzhi{color: #FF9502;padding-left: 10px;box-sizing: border-box;}

		.wuliu-sta{width: 100%;background: #FFFFFF;}
		.wuliu-sta .top-box{width: 100%;}
		.wuliu-sta .top-box .sta-one{align-items: center;justify-content: center;height: 60px;position: relative;}
		.wuliu-sta .top-box .sta-one span{font-size: 14px;color: #999999;position: relative;}
		.wuliu-sta .top-box .sta-one:first-child:after{display: none;}
		.wuliu-sta .top-box .sta-one:last-child:before{display: none;}
		.wuliu-sta .top-box .sta-one:before{display: block;width: 50%;height: 1px;background:#999999;content:"";position: absolute;bottom: 3px;right: 0;}
		.wuliu-sta .top-box .sta-one:after{display: block;width: 50%;height: 1px;background:#999999;content:"";position: absolute;bottom: 3px;left: 0;}
		.wuliu-sta .top-box .sta-one span:after{display: block;width: 8px;height: 8px;border-radius:50%;content:"";position: absolute;bottom: -20px;left: 50%;background:#999999;margin-left: -4px;}
		.wuliu-sta .top-box .sta-one.on span{font-size: 15px;display: block;background: #FF9502;color: #FFFFFF;padding: 0 10px;border-radius:20px;line-height: 28px;z-index:10;}
		.wuliu-sta .top-box .sta-one.on span:after{background: #FF9502;bottom: -16px;z-index:10;}
		.wuliu-sta .top-box .sta-one.on span:before{content:"";border:4px solid transparent;border-top-color:#FF9502;position:absolute;left:50%;bottom: -8px;margin-left: -4px;}
		.wuliu-sta .bot-box {width: 100%;justify-content: space-between;height: 20px;}
		.wuliu-sta .bot-box .city{width: 25%;text-align: center;line-height: 40px;font-size: 12px;color: #999999;}

		/*快递进程*/
		.wuliu-course{width: 100%;padding: 20px 14px;box-sizing: border-box;background: #FFFFFF;}
		.wuliu-course .course-one{width: 100%;height: 100%;position: relative;top: 0;left: 0;}
		.wuliu-course .course-one .left{text-align: right;flex-shrink: 0;height: 100%;position: relative;margin-right: 40px;color: #999999;}
		.wuliu-course .course-one .left .day-time{line-height: 20px;}
		.wuliu-course .course-one .left .hour-time{font-size: 12px;line-height: 16px;}

		/*左边的时间样式*/
		.wuliu-course .course-one .right{position: relative;top: 0;left: 0;color: #999999;}
		.wuliu-course .course-one .right::after{display: block;content:"";height: 100%;width: 1px;position: absolute;background:#FF9502;top: 0;left: -26px;color: #999999;}
		.wuliu-course .course-one .right .title{font-size: 15px;}
		.wuliu-course .course-one .right .state{line-height: 20px;font-size: 12px;}
		.wuliu-course .course-one .right .state::after{display: block;content:"";width: 7px;height: 7px;border-radius:50%;position: absolute;background:#FF9502;top: 0;left: -29px;z-index: 99;}
		.wuliu-course .course-one .right .text{font-size: 10px;line-height: 16px;padding-bottom: 20px;min-height: 20px;font-size: 10px;color: #999999;}

		/*处理第一个样式*/
		.wuliu-course .course-one:first-child .right .state::after{width: 16px;height: 16px;background: #FFFFFF;border: 5px solid #FF9502;box-sizing: border-box;left: -34px;}
		.wuliu-course .course-one:first-child .right{color: #333333;}
		.wuliu-course .course-one:first-child .right .text{font-size: 14px;}
		.wuliu-course .course-one:first-child .right .state{font-size: 14px;}

		/*处理倒数第二个*/
		.wuliu-course .course-one:nth-last-child(2) .right .state::after{width: 12px;height: 12px;background: #FF9502;left: -32px;}

		/*处理最后一个*/
		.wuliu-course .course-one:last-child .right .state::after{width: 16px;height: 16px;background: #FF9502;left: -34px;}
		.wuliu-course .course-one:last-child .right::after{display: none;}

	</style>
	<body>
		<div id="vue" class="warp">
			<div class="shop-box flex">
				<div class="img-box bgpic" :style="{backgroundImage:'url('+order.image+')'}">
					<div class="num"><i v-text="order.buy_num"></i>件商品</div>
				</div>
				<div class="r flex1">
					<div class="name">物流公司：<i v-text="order.kd_name"></i></div>
					<div class="number flex">
						<div class="t1">运单编号：<i v-text="order.kd_code"></i></div>
						<div class="fuzhi" :data-order="order.kd_code" onclick="fuzhiOrder(this)">复制</div>
					</div>
				</div>
			</div>
			<div class="wuliu-sta">
				<div class="top-box flex">
					<div :class="['sta-one flex flex1' , Pdata.state == '1' ? 'on':'' ]"><span>已发货</span></div>
					<div :class="['sta-one flex flex1' , Pdata.state == '0' ? 'on':'' ]"><span>运输中</span></div>
					<div :class="['sta-one flex flex1' , Pdata.state == '5' ? 'on':'' ]"><span>派送中</span></div>
					<div :class="['sta-one flex flex1' , Pdata.state == '3' ? 'on':'' ]"><span>已签收</span></div>
				</div>
				<div class="bot-box flex">
					<div class="city"></div>
					<div class="city"></div>
				</div>
			</div>
			<div class="wuliu-course">
				<div class="course-one flex" v-for="(item,key) in Pdata.data">
					<div class="left"></div>
					<div class="right flex1">
						<div class="title" v-if="Pdata.state == '1' && key == 0 ">已发货</div>
						<div class="title" v-if="Pdata.state == '5' && key == 0 ">派送中</div>
						<div class="title" v-if="Pdata.state == '0' && key == 0 ">运输中</div>
						<div class="title" v-if="Pdata.state == '3' && key == 0 ">已签收</div>
						<div class="state" v-text="item.context"></div>
						<div class="text" v-text="item.time"></div>
					</div>
				</div>
				<div class="course-one flex" v-if="order.kd_time">
					<div class="left"></div>
					<div class="right flex1">
						<div class="title">已发货</div>
						<div class="state">卖家发货</div>
						<div class="text" v-text="order.kd_time"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">
	define(function (require, exports, module) {
		pageParam = api.pageParam;
		//console.log(pageParam.id);
		_page.getData = function(loading) {
			lanYun.getVueData({url:'UserOrder/getwuliu',get:{orderid:pageParam.id},cache:0,loading:loading},function(ret) {
				//console.log(JSON.stringify(ret));
				lanYun.vue.order = ret.order;
			});
		};
		lanYun.newVue('#vue',{
			order:{}
		},function() {
			_page.getData(1);
		});

		//复制到剪切板
		fuzhiOrder = function (tis) {
			var dst = tis.dataset;
			var clipBoard = api.require('clipBoard');
			clipBoard.set({
			    value: dst.order
			}, function(ret, err) {
			    if (ret) {
			        lanYun.toast('复制成功')
			    } else {
			        lanYun.toast('复制失败')
			    }
			});
		}

	});
</script>
